<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset='utf-8'>
	<meta http-equiv="Content-Language" content="en">

	<link href="../index.css" media="all" rel="stylesheet" type="text/css" />
	<link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!--<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>-->
    
<script type="text/javascript" src="jqColor.js"></script>
<script type="text/javascript" src="jQueryColorPicker.min.js"></script>

</head>

<body>
<p class="the-paragraph">
	<input class="color" value="#B6BD79" />
	<input class="color" value="rgb(162, 63, 3)" />
	<input class="color" value="hsl(32, 95%, 23%)" />
</p>

<script type="text/javascript">
var memoryColors = [
		{r: 100, g: 200, b: 10,  a: 0.6},
		{r: 80,  g: 100, b: 50,  a: 0.9},
		{r: 70,  g: 80,  b: 10,  a: 0.9},
		{r: 20,  g: 200, b: 60,  a: 0.9},
		{r: 88,  g: 0,   b: 30,  a: 0.4},
		{r: 100, g: 0,   b: 100, a: 0.6},
		{r: 200, g: 0,   b: 0},
		{r: 200, g: 30,  b: 100}
	];
var $myColorPicker = $('input.color').colorPicker({
		customBG: '#222',
        memoryColors:memoryColors,
		readOnly: true,
		init: function(elm, colors) {
			elm.style.backgroundColor = setBackgroundColor(elm.value);
			elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
		},
		displayCallback: function(colors, mode, options) {
			setInputColor($(options.input), colors);
		}
	});
</script>
</body>
</html>
